<template>
  <div class="assembleMember">
    <div class="list">
      <div class="item">
        <div class="item_left">
          <img :src="assembleMember.photo_url" alt="" mode="aspectFill">
          <div>团长</div>
        </div>
        <div class="item_right">
          <div class="item_right_name">{{assembleMember.nickname}}</div>
          <div class="item_right_time">{{assembleMember.created_at}} 开团</div>
        </div>
      </div>
      <div class="item" v-for="(item,index) of assembleMember.group_add_list" :key="index">
        <div class="item_left">
          <img :src="item.photo_url" alt="" mode="aspectFill">
          <div>团员</div>
        </div>
        <div class="item_right">
          <div class="item_right_name">{{item.nickname}}</div>
          <div class="item_right_time">{{item.created_at}} 开团</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'assembleMember',
  data() {
    return {
      
    }
  },
  computed: {
    assembleMember(){
      console.log(this.$store.state.modulesAssembleMember.assembleMember)
      return this.$store.state.modulesAssembleMember.assembleMember
    }
  },
}
</script>
<style lang="scss" scoped>
  .assembleMember{
    width: 100%;
    min-height: 100%;
    background: #eee;
  }
  .list{
    background: #fff;
    .item{
      display: flex;
      align-items: center;
      padding:10px;
      &_left{
        position: relative;
        border:2px solid #eb544d;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-right: 30px;
        img{
          border-radius: 50%;
          width: 40px;
          height: 40px;
        }
        &>div{
          text-align: center;
          width: 30px;
          color:#fff;
          background: #eb544d;
          border-radius: 5px;
          bottom: -10px;
          left:50%;
          font-size: 12px;
          transform: translateX(-50%);
          position: absolute;
        }
      }
    }
  }
</style>
